<template>
	<div class="max">
		<my-header :backBtn="true">
			<div slot="title">
				教师请假
			</div>
		</my-header>
		<div class="cont-nof">
			<div class="weui-navbar">
				<div class="weui-navbar__item " :class="{'weui-bar__item_on':menu==0}" @click="menu=0">
					未处理
				</div>
				<div class="weui-navbar__item" :class="{'weui-bar__item_on':menu==1}" @click="menu=1">
					已处理
				</div>
			</div>
			<div class="tl leave-list">
				<div class="weui-panel__bd">
					<div v-if="menu==0">
						<div class="weui-loadmore weui-loadmore_line" v-if="list.records.length==0">
							<span class="weui-loadmore__tips">暂无数据</span>
						</div>
						<div v-else>
							<div class="weui-media-box weui-media-box_text" v-for="item in list.records">
								<router-link :to="{path: '/teaApplyDetails',query:item}">
									<div>
										<h4 class="weui-media-box__title">{{item.teacherName}}</h4>
										<p class="weui-media-box__desc">请假类型:{{item.leaveType}}</p>
										<p class="weui-media-box__desc">请假开始时间:{{item.startTime}}</p>
										<p class="weui-media-box__desc">请假结束时间:{{item.endTime}}</p>
									</div>
								</router-link>
							</div>
							<a href="javascript:void(0);" class="weui-cell weui-cell_link" v-if="list.current*list.size<=list.total">
								<div class="weui-cell__bd" @click="loadmore">查看更多</div>
							</a>
						</div>
					</div>
					<div v-if="menu==1">
						<div class="weui-loadmore weui-loadmore_line" v-if="list.records.length==0">
							<span class="weui-loadmore__tips">暂无数据</span>
						</div>
						<div v-else>
							<div class="weui-media-box weui-media-box_text" v-for="item in list.records">
								<router-link :to="{path: '/teaApplyDetails',query:item}">
									<div>
										<span class="weui-badge fr" v-if="item.status==1" style="background: #06AD56;">已同意</span>
										<span class="weui-badge fr" v-if="item.status==2">不同意</span>
										<h4 class="weui-media-box__title">{{item.teacherName}}</h4>
										<p class="weui-media-box__desc">请假类型:{{item.leaveType}}</p>
										<p class="weui-media-box__desc">请假开始时间:{{item.startTime}}</p>
										<p class="weui-media-box__desc">请假结束时间:{{item.endTime}}</p>
									</div>
								</router-link>
							</div>
							<a href="javascript:void(0);" class="weui-cell weui-cell_link" v-if="list.current*list.size<=list.total">
								<div class="weui-cell__bd" @click="loadmore">查看更多</div>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>
</template>

<script>
	import PullTo from 'vue-pull-to';
	export default {
		components: {
			PullTo
		},
		data() {
			return {
				menu: 0,
				list: {
					records: []
				},
				param: {
					current: 1, //当前页页码
					size: 10, //一页显示几条数据
					status: 0
				},
			}
		},
		watch: {
			menu(val) {
				if (val == 0) {
					this.param.status = 0;
				} else {
					this.param.status = -1;
				}
				this.queryFn();
			}
		},
		methods: {
			loadmore() {
				this.param.size += 1;
				this.queryFn();
			},
			queryFn() {
				this.$toast.show('数据加载中', 'loading');
				this.$http.fetchTeaLeavePers(this.param).then(resp => {
					this.list = resp.data;
					this.$toast.hide();
				});
			}
		},
		mounted() {
			this.queryFn();
		},
	}
</script>

<style scoped>
	.leave-list {
		height: calc(100% - 5.6rem);
		overflow: auto;
	}
</style>
